<!DOCTYPE html>
<html height100 xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta th:replace="authority/common/currency/head"/>
</head>

<body class="childrenBody" padding10>

<div id="seach-container"></div>
<table id="dynamic-page-table" lay-filter="dynamic-page-table" class="layui-hide zsa-auto-height"></table>

<script type="text/html" id="sys_toolbarDemo">
    <button class="layui-btn layui-btn-sm" lay-event="sys_toolbar_search">搜索</button>
    <button class="layui-btn layui-btn-sm" lay-event="sys_toolbar_refresh">
        <i class="layui-icon" style="line-height:30px">&#xe669;</i>
    </button>
    <button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="sys_toolbar_add">
        <i class="layui-icon" style="line-height:30px">&#xe654;</i>添加
    </button>
</script>
<!--操作-->
<script type="text/html" id="toolDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon">&#xe642;</i>编辑</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del"><i class="layui-icon">&#xe640;</i>删除</a>
</script>

<script th:replace="authority/common/currency/footer"></script>
<script>
    layui.extend({
        complexSearch: 'complexSearch/complexSearch', // {/}的意思即代表采用自有路径，即不跟随 base 路径
        initTable: 'initTable/initTable'
    });
    layui.use(['initTable', 'complexSearch', 'lutil'], function () {
        var table = layui.table
            , complexSearch = layui.complexSearch
            , layer = layui.layer
            , lutil = layui.lutil;

        // 搜索框
        var search = complexSearch.render({
            container: "#seach-container",
            isDynamic: false,
            submit: false,
            returnFormat: {
                dataTypeName: 'type'
            },
            data: [
                {field: 'title', title: '表格名称', editType: 'text', dataType: 'string', formulas: ['<->']},
                {field: 'dmlName', title: 'DML语句', editType: 'text', dataType: 'string', formulas: ['<->']},
            ],
            search: function (data) {
                var thisTable = layui.pageObtainTable('dynamic-page-table');
                thisTable && thisTable.query({searchs: data.length > 0 ? JSON.stringify(data) : ''});
            }
        });

        var height = $(window).height() - $('#seach-container').outerHeight() - 30,
            height_value = parseInt(height) > 200 ? parseInt(height) : 200;

        var defaultSearchs = [{
            field: 'pageId',
            value: '[[${pageId}]]'
        }];
        layui.page_table_examples.push(table.render({
            elem: '#dynamic-page-table',
            url: content_path + 'authority/plat/dml/query.do',
            height: height_value,
            toolbar: '#sys_toolbarDemo',
            title: 'dml列表',
            cellMinWidth: '100',
            headers: {'[[${_csrf.headerName}]]': '[[${_csrf.token}]]'},
            where: {dmlId: '34D05DC5B2F644CF82E03A8809D7CCD3', selectType: 2, searchs: JSON.stringify(defaultSearchs)},
            cols: [
                [//标题栏
                    {type: 'checkbox', fixed: 'left'},
                    {field: 'tableId', title: '表格ID', fixed: 'left', hide: true, width: 200},
                    {field: 'sort', title: '序号', width: 80, fixed: 'left'},
                    {field: 'title', title: '表格名称', sort: true, fixed: 'left', width: 150},
                    {field: 'dmlName', title: 'DML语句', minWidth: 100},
                    {field: 'cz', title: '操作', width: 160, toolbar: "#toolDemo", fixed: 'right', align: 'center'}
                ]
            ]
        }));

        //头工具栏事件
        table.on('toolbar(dynamic-page-table)', function (obj) {
            var thisTable = layui.pageObtainTable('dynamic-page-table');
            var checks = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'sys_toolbar_refresh':
                    thisTable && thisTable.refresh();
                    break;
                case  'sys_toolbar_search':
                    search.submit();
                    break;
                case 'sys_toolbar_add':
                    lutil.open_iframe("新增表格", content_path + "authority/dynamic_page/table/edit.html?pageId=[[${pageId}]]", '100%', '100%', function () {
                        thisTable && thisTable.refresh();
                    });
                    break;
            }
        });

        table.on('sort(dynamic-page-table)', function (obj) {
            var thisTable = layui.pageObtainTable('dynamic-page-table');
            thisTable && thisTable.sort(obj);
        });

        table.on('tool(dynamic-page-table)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var thisTable = layui.pageObtainTable('dynamic-page-table');
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象
            if (layEvent === 'edit') {
                lutil.open_iframe("编辑 - " + data['title'], content_path + "authority/dynamic_page/table/edit.html?pageId=[[${pageId}]]&id=" + data['tableId'], "100%", "100%", function () {
                    thisTable && thisTable.refresh();
                });
            }
            if (layEvent === 'del') {
                var loding = layer.load(2, {shade: [0.3, '#eee']});
                ajaxRequestByCsrf(content_path + "authority/dynamic_page/table/del.do", {
                    tableId: data['tableId'],
                    pageId: '[[${pageId}]]'
                }, function (res) {
                    lutil.success_msg(res.message);
                    thisTable && thisTable.refresh();
                }, null, function () {
                    layer.close(loding);
                })
            }
        });

    })
</script>
</body>
</html>